<template>
  <div id="attractInvestment">
    <div class="search_box">
      <div class="search_input">
        <el-input v-model="value" />
        <el-select v-model="value" />
      </div>
      <div class="search_btn">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button icon="el-icon-refresh-right">重置</el-button>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 10px;" @click="createAvtive = true">新建代理</el-button>
    <el-table :data="list" style="width: 100%" border :header-cell-style="()=>{return 'background-color:#f2f3f5'}" height="620">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="name" label="地址" />
      <el-table-column prop="name" label="联系方式" />
      <el-table-column prop="name" label="认证" />
      <el-table-column prop="name" label="电柜" width="100">
        <template>
          <el-button type="text" @click="batteryinfo">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="">
          <el-button type="text" @click="createAvtive = true">修改</el-button>
          <el-button type="text" @click="attactive = true">分配</el-button>
          <el-button type="text" @click="delAttr">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :page-size="100" layout="total, prev, pager, next,jumper" :total="1000" />
    </div>
    <el-drawer
      title="新建代理商"
      size="40%"
      :visible.sync="createAvtive"
      :before-close="close1"
    >
      <div class="demo-drawer__content">
        <el-form ref="attform" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="名称" prop="attname">
            <el-input v-model="form.attname" />
          </el-form-item>
          <el-form-item label="地址" prop="attaddress">
            <el-input v-model="form.attaddress" />
          </el-form-item>
          <el-form-item label="地址" prop="attmobile">
            <el-input v-model="form.attmobile" />
          </el-form-item>
          <el-form-item label="身份认证" prop="attauth">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="form.remark"
              type="textarea"
              style="width: 400px;"
              :rows="4"
            />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="close1">取 消</el-button>
          <el-button type="primary" @click="submit1">确 定</el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog
      title=""
      :visible.sync="active"
      width="50%"
      :before-close="close2"
    >
      <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="name" label="位置" />
        <el-table-column prop="name" label="规格" />
        <el-table-column prop="name">
          <template>
            <el-button type="text" @click="toinfo">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-drawer
      title="分配电柜"
      size="40%"
      :visible.sync="attactive"
      :before-close="closeDis"
    >
      <div class="demo-drawer__content" style="padding: 20px 30px; margin-bottom: 50px;">
        <el-descriptions title="代理信息" direction="vertical" :column="3" border>
          <el-descriptions-item label="名称">199</el-descriptions-item>
          <el-descriptions-item label="地址">60v</el-descriptions-item>
          <el-descriptions-item label="联系方式" :span="2">9</el-descriptions-item>
          <el-descriptions-item label="选择电柜">
            <el-button type="primary" size="small" @click="choosebat">选择电柜</el-button>
          </el-descriptions-item>
        </el-descriptions>

        <div v-if="batlist[0]" style="margin-top: 50px;">
          <el-descriptions title="电柜信息" direction="vertical" :column="3" border style="margin-bottom: 30px;">
            <el-descriptions-item label="序列号">{{ batlist[0].batid }}</el-descriptions-item>
            <el-descriptions-item label="型号">{{ batlist[0].battype }}</el-descriptions-item>
            <el-descriptions-item label="接口">{{ batlist[0].batnum }}</el-descriptions-item>
          </el-descriptions>
          <el-form ref="batform" :model="batform" :rules="batrule">
            <el-form-item label="名称" prop="batname">
              <el-input v-model="batform.batname" />
            </el-form-item>
            <el-form-item label="地址" prop="bataddress">
              <el-input
                v-model="batform.address"
                type="textarea"
                style="width: 400px;"
                :rows="4"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="closeDis">取 消</el-button>
          <el-button type="primary" @click="submitAt">确 定</el-button>
        </div>
      </div>
    </el-drawer>
    <ChooseBat :show="show" @close="close" @choose="choose" />
  </div>
</template>
<script>
import ChooseBat from '../distribution/chooseBat.vue'
export default {
  components: { ChooseBat },
  data() {
    return {
      value: '',
      active: false,
      createAvtive: false,
      attactive: false,
      show: false,
      batlist: [],
      form: { attname: '', attaddress: '', attmobile: '', attauth: '', remark: '' },
      rules: {
        attname: [
          { required: true, message: '请填写名称', trigger: 'change' }
        ],
        attaddress: [
          { required: true, message: '请填写住址', trigger: 'change' }
        ],
        attmobile: [
          { required: true, message: '请填写联系方式', trigger: 'change' }
        ],
        attauth: [
          { required: true, message: '请上传认证', trigger: 'change' }
        ]
      },
      list: [
        { name: '代理商1' },
        { name: '经销商' }
      ],
      batform: {
        batname: '',
        bataddress: ''
      },
      batrule: {
        batname: [
          { required: true, message: '请填写名称', trigger: 'change' }
        ],
        bataddress: [
          { required: true, message: '请填写地址', trigger: 'change' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    delAttr() {
      this.$confirm('确定解除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已删除'
        })
      })
    },
    batteryinfo() {
      this.active = true
    },
    // 新建编辑代理商
    close1() {
      this.createAvtive = false
    },
    submit1() {
      this.$refs['attform'].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    // 分配
    closeDis() {
      this.attactive = false
    },
    choosebat() {
      console.log('1234')
      this.show = true
    },
    close() {
      this.show = false
    },
    choose(item) {
      this.batlist[0] = item
      this.show = false
    },
    submitAt() {
      if (this.batlist[0]) {
        this.$refs['batform'].validate(valid => {
          if (valid) {
            alert('submit!')
          } else {
            return false
          }
        })
      } else {
        this.$message.info('请选择电柜')
      }
    },
    // 电柜详情
    close2() {
      this.active = false
    },
    toinfo() {
      this.$router.push({ path: '/batteryinfo' })
    }
  }
}
</script>
  <style lang='scss' scoped>

  .pagination {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
  }
  .el-drawer {
    position: relative;
    .el-input {
      width: 400px;
    }
    .demo-drawer__footer {
      position: absolute;
      bottom:30px;
      right:30px;
    }
    .el-tag{
      margin-right: 20px;
      cursor: pointer;
    }
  }
  .el-dialog {
    min-height: 400px;
    max-height: 400px;
  }
  </style>
